<template>
  <div class="bw-app-page-setup-base-container">
    <div class="content">
      <BwGroup title="常用设置" class="group-container">
        <div class="bw-group-content bw-form-item">
          <span class="bw-form-label">组件标识</span>
          <Input
            class="bw-form-content"
            placeholder="请输入组件标识"
            v-model:value="curFormData.code"
          />
        </div>

        <div class="bw-group-content bw-form-item">
          <span class="bw-form-label">组件名称</span>
          <Input
            class="bw-form-content"
            placeholder="请输入组件名称"
            v-model:value="curFormData.name"
          />
        </div>

        <div class="bw-group-content bw-form-item">
          <span class="bw-form-label">组件分组</span>
          <Input
            class="bw-form-content"
            placeholder="请输入组件分组"
            v-model:value="curFormData.group"
          />
        </div>

        <div class="bw-group-content bw-form-item">
          <span class="bw-form-label">组件关键字</span>
          <Select
            mode="tags"
            class="bw-form-content"
            placeholder="请输入关键字"
            :allowClear="true"
            :tokenSeparators="[',']"
            v-model:value="curFormData.keywords"
          />
        </div>
      </BwGroup>
    </div>

    <div class="bnt-container">
      <Button @click="onSave" type="primary">保存</Button>
    </div>
  </div>
</template>

<script lang="ts">
import { useRoute } from 'vue-router'
import { useMessage } from '@/hooks'
import { api, useAxiosResponse } from '@/api'

import { ref, unref, onMounted, defineComponent } from 'vue'

import BwGroup from './components/group/index.vue'
import { Button, Select, Input } from 'ant-design-vue'

import type {
  SysCustomComInfoOutput,
  BwFlowFormBaseSubmitInfoModel,
} from './model'

/** 成员弹窗选择器-渲染器-编辑模式-标准 */
export default defineComponent({
  name: 'BwRenderEditStandardChooseUser',
  components: {
    BwGroup,
    Button,
    Input,
    Select,
  },
  props: {},
  emit: ['update:value'],
  setup() {
    const route = useRoute()
    const { notification } = useMessage()

    const curBaseInfo = ref<SysCustomComInfoOutput>({})
    const curFormData = ref<BwFlowFormBaseSubmitInfoModel>({
      code: '',
      name: '',
      group: '',
      keywords: [],
    })

    /** 保存基础设置信息 */
    const onSave = () => {
      const { appId, pageId } = route.params

      Promise.all([
        api.apiSysAppPageModifyInfoPost({
          appId: appId.toString(),
          pageId: pageId.toString(),
          name: unref(curFormData).name,
          group: unref(curFormData).group,
          desc: unref(curBaseInfo).desc,
          extInfo: unref(curBaseInfo).extInfo,
          keywords: unref(curFormData).keywords,
        }),
        api.apiSysAppPageModifyCodePost({
          appId: appId.toString(),
          pageId: pageId.toString(),
          newCode: unref(curFormData).code,
        }),
      ])
        .then(([info, code]) => {
          const infoRes = useAxiosResponse<void>(info)
          const codeRes = useAxiosResponse<void>(code)
          if (infoRes && codeRes) {
            notification.success({ message: '基础设置信息保存成功' })
            onGetSchemaInfo()
          } else {
            notification.error({ message: '修改自定义组件信息失败，请检查！' })
          }
        })
        .catch(() => {
          notification.error({ message: '修改自定义组件信息失败，请检查！' })
        })
    }

    /** 获取获取自定义组件基础信息 */
    const onGetSchemaInfo = () => {
      const appId = route.params?.appId
      const pageId = route.params?.pageId

      if (appId && pageId) {
        api
          .apiSysAppPageGetInfoPost({
            appId: appId.toString(),
            pageId: pageId.toString(),
          })
          .then((res) => {
            const resData = useAxiosResponse<SysCustomComInfoOutput>(res)

            curBaseInfo.value = resData ?? {}
            curFormData.value = {
              name: resData?.name ?? '',
              code: resData?.code ?? '',
              group: resData?.group ?? '',
              keywords: resData?.keywords ?? [],
            }
          })
      }
    }

    onMounted(() => {
      onGetSchemaInfo()
    })

    return { curFormData, onSave }
  },
})
</script>

<style scoped lang="less">
.bw-app-page-setup-base-container {
  min-width: 700px;
  width: 100%;
  height: 100%;

  .content {
    width: 100%;
    padding: 16px;
    height: calc(100% - 98px);

    .title {
      margin-top: 16px;
      line-height: 32px;
    }

    .group-container {
      padding: 8px 0 24px;
      background: #fff;
      margin-bottom: 24px;
      border-radius: 5px;

      .setting-part {
        padding: 8px 0;
        display: flex;
      }
    }

    .bw-form-item {
      margin-top: 16px;

      .bw-form-label {
        width: 100%;
        margin-bottom: 6px;
        display: inline-block;
      }

      .bw-form-content {
        width: 360px;
      }
    }
  }

  .bnt-container {
    width: 100%;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-top: 1px solid #e8e8e8;
    border-left: 1px solid #e8e8e8;
  }
}
</style>
